import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const incrementAsync = createAsyncThunk(
  'counter/incrementAsync',
  async ({ step, delay }) => {
    const res = await new Promise(resolve => {
      setTimeout(() => {
        resolve(step);
      }, delay);
    });
    return res;
  },
);

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state, action) => {
      state.value += action.payload;
    },
    decrement: (state, action) => {
      state.value -= action.payload;
    },
  },
  extraReducers: builder => {
    builder
      // .addCase(incrementAsync.pending, (state) => {
      //   state.status = 'loading'
      // })
      .addCase(incrementAsync.fulfilled, (state, action) => {
        state.value += action.payload;
        // state.status = 'idle'
      });
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
